<template>
	<view class="product-item-content" @click.stop="onTap" :data-row="info">
		<view class="product_image_content">
			<image class="product_image" :src="$imageUrl(info.mainImage)" mode="aspectFit"></image>
		</view>
		<view class="product_text product_title">{{info.productName}}</view>
		<view class="product_text product_date">{{info.createTime}}</view>
		<view class="product_text product_desc">{{info.tag}}</view>
	</view>
</template>

<script>
	export default {
		name:'cs-product-item',
		props:{
			info:{
				type:Object,
				default:{
					id:'0',
					mainImage:'',
					images:[],
					productName:'',
					productSpec:'',
					tag:'',
					feature:'',
					createTime:'',
					contactPhone:'',
					applicationScenario:'',
				}
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			onTap(e){
				this.$emit('onRowClick', e);
			}
		}
	}
</script>

<style>
.product-item-content{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	overflow: clip;
	
	border-radius: 12px;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), #FFFFFF;
	box-sizing: border-box;
	border: 1px solid #F3F4F6;
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
	width: 100%;
}

.product_image_content {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden; 
}

.product_image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product_text{
	margin-left: 24rpx;
	margin-right: 24rpx;
	margin-bottom: 8rpx;
}

.product_title{
	font-family: Roboto;
	font-size: 28rpx;
	font-weight: 500;
	line-height: 40rpx;
	letter-spacing: normal;
	color: #000000;
}
.product_date{
	font-family: Roboto;
	font-size: 24rpx;
	font-weight: normal;
	line-height: 32rpx;
	letter-spacing: normal;
	color: #6B7280;
}
.product_desc{
	font-family: Roboto;
	font-size: 24rpx;
	font-weight: normal;
	line-height: 32rpx;
	letter-spacing: normal;
	color: #4B5563;
}
.product-item-content :last-child{
	margin-bottom: 24rpx;
}



</style>
